<template>
    <div class="common-container">
        <div class="header">
            <div class="header_left">
                <el-popover placement="bottom-start" width="330" trigger="click" style="margin-left: 0px"
                    popper-class="popover" size="small" v-model="showPopover">
                    <div>
                        <el-form label-width="90px" style="margin: 20px 0" class="popover_from">

                            <el-form-item size="small" label="目标类型" prop="targetType">
                                <el-select v-model="searchForm.targetType" filterable placeholder="请选择目标类型" clearable
                                    style="width: 100%;" @change="targetTypeChange">
                                    <el-option v-for="(item, i) in targetTypeList" :key="i" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item size="small" label="租户名称" prop="tenantId" v-if="tenantFlag">
                                <el-select v-model="addInfo.tenantId" filterable placeholder="请选择租户名称" clearable
                                    @visible-change="tenantIdChange" style="width: 100%;" v-loadMore="loadMore"
                                    @change="tenantChange">
                                    <el-option v-for="(item, i) in enterpriseList" :key="i" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                    <div class="div_box" v-loading="loading" :style="loading ? '' : 'display: none;'">
                                    </div>
                                </el-select>
                            </el-form-item>

                            <el-form-item size="small" label="组织机构" prop="orgId" v-if="orgFlag">
                                <!-- <el-select v-model="addInfo.orgId" filterable placeholder="请选择组织机构" style="width: 100%;"
                                    @change="orgIdChange" v-loadMore="loadMoreorg" >
                                    <el-option v-for="(item, i) in orgList" :key="i" :label="item.orgName" :value="item.id">
                                    </el-option>
                                    <div class="div_box" v-loading="loadingorg" :style="loadingorg ? '' : 'display: none;'">
                                    </div>
                                </el-select> -->

                                <TreeSearchAdd style="width: 100%;" @changeOrgId="changeOrgId" :addtenantId="addInfo.tenantId"
                                    @onClear="onClear" ref="refTreeSearch"></TreeSearchAdd>

                            </el-form-item>

                            <el-form-item size="small" label="所属建筑物" prop="parentId" v-if="parentFlag">
                                <el-select v-model="addInfo.parentId" filterable placeholder="请选择所属建筑物"
                                    style="width: 100%" @change="parentIdChange" v-loadMore="loadMoreparent">
                                    <el-option v-for="item in buildings" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                    <div class="div_box" v-loading="loadingParent"
                                        :style="loadingParent ? '' : 'display: none;'">
                                    </div>
                                </el-select>
                            </el-form-item>

                            <el-form-item size="small" label="所属楼层" prop="floorId" v-if="floorFlag">
                                <el-select v-model="addInfo.floorId" filterable placeholder="请选择所属楼层"
                                    style="width: 100%" v-loadMore="loadMorefloor" @change="floorIdChange">
                                    <el-option v-for="item in floor" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                    <div class="div_box" v-loading="loadingfloor"
                                        :style="loadingfloor ? '' : 'display: none;'"> </div>
                                </el-select>
                            </el-form-item>

                            <el-form-item size="small" label="安装点" prop="spaceId" v-if="spaceFlag">
                                <el-select filterable v-model="addInfo.spaceId" placeholder="请选择安装点" style="width: 100%"
                                    v-loadMore="loadMorespace">
                                    <el-option v-for="item in spaceList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                    <div class="div_box" v-loading="loadingspace"
                                        :style="loadingspace ? '' : 'display: none;'"> </div>
                                </el-select>
                            </el-form-item>

                            <el-form-item size="small" label="设备编码" prop="deviceId" v-if="deviceFlag">
                                <el-select v-model="addInfo.deviceId" filterable placeholder="请选择设备编码"
                                    style="width: 100%;" clearable @visible-change="deviceChange"
                                    v-loadMore="loadMoredevice" remote :remote-method="remoteMethod">
                                    <el-option v-for="(item, i) in deviceList" :key="i" :label="item.imei"
                                        :value="item.id">
                                    </el-option>
                                    <div class="div_box" v-loading="loadingDevice"
                                        :style="loadingDevice ? '' : 'display: none;'">
                                    </div>
                                </el-select>
                            </el-form-item>

                        </el-form>
                        <div class="footer" style="text-align: right">
                            <el-button size="small" @click="resetClick" class="cancel-button">重 置</el-button>
                            <el-button size="small" @click="searchClick1" class="confirm-button">确 定</el-button>
                        </div>
                    </div>
                    <el-button size="small" style="
              margin-left: 15px;
              background: #7367f0;
              color: #fff;
              border: none;
              font-size: 14px;
              padding: 8px 15px;
            " slot="reference">
                        高级搜索<i class="el-icon-search" style="margin-left: 5px; font-size: 12px"></i></el-button>
                </el-popover>
            </div>
            <div class="header_right">
                <el-button class="el_button" size="small" icon="el-icon-plus" style="margin-left: 15px"
                    @click="addClick" v-permission="{ action: 'smoke:add' }">
                    新增
                </el-button>
            </div>
        </div>
        <div class="content">
            <el-table :data="dataList" class="table" :header-cell-style="headerStyle">
                <el-table-column align="center" label="序号" type="index" width="80" height="30"></el-table-column>
                <el-table-column align="center" prop="targetName" label="目标名称" min-width="100"
                    show-overflow-tooltip></el-table-column>

                <el-table-column align="center" prop="targetType" label="目标类型" min-width="90" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <!-- <el-tag v-if="scope.row.targetType == 1" type="warning">租户</el-tag>
                <el-tag v-if="scope.row.targetType == 2" type="success">组织机构</el-tag>
                <el-tag v-if="scope.row.targetType == 3" type="info">建筑物</el-tag>
                <el-tag v-if="scope.row.targetType == 4" type="danger">楼层</el-tag>
                <el-tag v-if="scope.row.targetType == 5" type="success">安装点</el-tag>
                <el-tag v-if="scope.row.targetType == 6" >设备</el-tag> -->
                        <span v-if="scope.row.targetType == 1">租户</span>
                        <span v-if="scope.row.targetType == 2">组织机构</span>
                        <!-- <span v-if="scope.row.targetType == 3">建筑物</span>
                        <span v-if="scope.row.targetType == 4">楼层</span>
                        <span v-if="scope.row.targetType == 5">安装点</span> -->
                        <span v-if="scope.row.targetType == 6">设备</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" prop="time" label="阈值策略时间（分钟）" min-width="150"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" prop="number" label="阈值策略次数" min-width="150"
                    show-overflow-tooltip></el-table-column>
                <el-table-column align="center" label="操作" min-width="140">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="编辑" placement="bottom"
                            v-permission="{ action: 'smoke:edit' }">
                            <i @click="editClick(scope.row)" class="iconfont tianxie tableBtnIcon"></i>
                        </el-tooltip>
                        <el-tooltip class="item" effect="dark" content="删除" placement="bottom"
                            v-permission="{ action: 'smoke:delete' }">
                            <i @click="delClick(scope.row.id)" class="iconfont shanchu tableBtnIcon"></i>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="page" :limit.sync="limit"
                :pageSizes="[10, 20, 30, 50]" @pagination="getDataList" class="pagination" />
        </div>

        <addsmokeDetector ref="refaddsmokeDetector"></addsmokeDetector>
        <editsmokeDetector ref="refeditsmokeDetector" :editData="editData"></editsmokeDetector>
    </div>
</template>

<script>
import { reqSmokeAlarmConfigPage, reqSmokeAlarmConfigRemove } from "@api/api.js";
import Pagination from "@/components/Pagination.vue";
import tableStyleMixin from "@mixin/table-style";
import addsmokeDetector from "./components/addsmokeDetector.vue";
import editsmokeDetector from "./components/editsmokeDetector.vue";
import advanceSearchMixin from "./mixins/advanceSearch.js"; //高级搜索
import loadMore from "@mixin/loadMore";
import TreeSearchAdd from "@components/TreeSearchAdd.vue";

export default {
    name: "smoke",
    components: { Pagination, addsmokeDetector, editsmokeDetector, TreeSearchAdd },
    mixins: [tableStyleMixin, advanceSearchMixin, loadMore],
    data() {
        return {
            tenantName: "",
            loadingSearch: false, //查询按钮loading
            dataList: [],
            limit: 10,
            page: 1,
            total: 0,
            editData: {}, //修改数据
        };
    },
    created() {
        this.getDataList();
    },
    mounted() { },
    methods: {
        changeOrgId(instanceId) {
            this.addInfo.orgId = instanceId.id
        },
        onClear() {
            this.targetId = '';
        },
        // 获取列表
        async getDataList() {
            const res = await reqSmokeAlarmConfigPage(this.page, this.limit, {
                targetId: this.searchForm.targetId,
                targetType: this.searchForm.targetType
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            // console.log(res);
            this.dataList = res.data.rows;
            this.total = res.data.total;
        },
        // 搜索
        async searchClick() {
            this.page = 1;
            this.limit = 10;
            this.loadingSearch = true;
            await this.getDataList();
            this.loadingSearch = false;
        },
        getInitDataList() {
            this.page = 1;
            this.limit = 10;
            this.getDataList();
        },
        // 清除请求
        nameClear() {
            this.getInitDataList();
        },
        // 新增
        addClick() {
            this.$refs.refaddsmokeDetector.dialogVisible = true;
        },
        // 编辑
        editClick(row) {
            this.editData = JSON.parse(JSON.stringify(row));
            this.$refs.refeditsmokeDetector.dialogVisible = true;
        },
        // 清除editData
        clearEditData() {
            this.editData = {};
        },
        // 删除
        async delClick(id) {
            const result = await this.$confirm(
                "此操作将永久删除该配置, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            ).catch(() => { });
            if (result !== "confirm") return;
            const res = await reqSmokeAlarmConfigRemove(id);
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            this.$modal.notifySuccess("删除成功");
            this.getDataList();
        },
    },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

// 时间组件--新增&编辑用
::v-deep .el-range-input {
    background-color: transparent;
    color: @primaryTxtcolor;
}

::v-deep .el-range__icon {
    color: #686868;
}

::v-deep .el_button.el-button--small {
    background: #7367f0;
    color: #fff;
    border: none;
}

// 站点logo居中
::v-deep .el-popover__reference-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

//   高级搜索按钮
.el-button--primary {
    background-color: #7367f0;
    border: 1px solid #7367f0;
    color: #fff;
}

// 高级搜索
::v-deep .el-button--primary {
    background-color: #7367f0;
    border: 1px solid #7367f0;
    color: #fff;
}

::v-deep .el-form-item__label {
    color: @primaryThemeTxtColor2;
}

::v-deep .el-input__inner {
    color: var(--primaryContentTxt, #f1f1f1) !important;
}
</style>